<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% if current_page.title %}
    <title>{{ current_page.title }}</title>
    {% endif %}
    <!--引入 Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F23e806d9d144dfa9762e696f1d3d6a35' type='text/javascript'%3E%3C/script%3E"));
</script>

    <script>
{#        function crawl_view(start_book_id, end_book_id){#}
{#              $('#container').highcharts({#}
{#                                chart: {#}
{#                                    type: 'bar',#}
{#                                    animation: Highcharts.svg,#}
{#                                    marginRight: 10,#}
{#                                    events: {#}
{#                                        load: function() {#}
{#                                            var series = this.series[0];#}
{#                                            setInterval(function () {#}
{#                                                $.ajax({#}
{#                                                    url:"{% url 'checks' %}",#}
{#                                                    data:{start_book_id:start_book_id, end_book_id:end_book_id},#}
{#                                                    type:'POST',#}
{#                                                    dataType:'json',#}
{#                                                    async:true,#}
{#                                                    success:function(data){#}
{#                                                        alert(data)#}
{#                                                        $('#clock').val(data[1]);#}
{#                                                        if(data[0]){#}
{#                                                            series.setData(data[1])#}
{#                                                        }else{#}
{#                                                            alert(data[1])#}
{#                                                        }#}
{#                                                    }#}
{#                                                })#}
{#                                            },10000);#}
{#                                        }#}
{#                                    }#}
{#                                },#}
{#                                title: {#}
{#                                    text: '爬虫进度监控',#}
{#                                    align: 'center',#}
{#                                    x: 70#}
{#                                },#}
{#                  lang: {#}
{#            noData: "等待10秒..."#}
{#        },#}
{#                                xAxis: {#}
{#                                    type: 'category',#}
{#                                    labels: {#}
{#                                        rotation: 0,#}
{#                                        style: {#}
{#                                            fontSize: '13px',#}
{#                                            fontFamily: 'Verdana, sans-serif'#}
{#                                        }#}
{#                                    }#}
{#                                },#}
{#                                legend: {#}
{#                                    layout: 'vertical',#}
{#                                    floating: true,#}
{#                                    backgroundColor: '#FFFFFF',#}
{#                                    align: 'center',#}
{#                                    verticalAlign: 'top',#}
{#                                    y: 60,#}
{#                                    x: -60#}
{#                                },#}
{#                                tooltip: {#}
{#                                    formatter: function () {#}
{#                                        return '<b>' + this.series.name + '</b><br/>' +#}
{#                                            this.x + ': ' + this.y;#}
{#                                    }#}
{#                                },#}
{#                                series: [{#}
{#                                    name: '爬虫进度',#}
{#                                    data: [],#}
{#                                    dataLabels: {#}
{#                                        enabled: true,#}
{#                                        rotation: 0,#}
{#                                        align: 'left',#}
{#                                        style: {#}
{#                                            fontSize: '13px',#}
{#                                            fontFamily: 'Verdana, sans-serif'#}
{#                                        }#}
{##}
{#                                    }#}
{#                                }]#}
{#                            });#}
{#                var#}
{#        origChartWidth = $('#container').highcharts().chartWidth,#}
{#        origChartHeight = $('#container').highcharts().chartHeight,#}
{#        chartWidth = origChartWidth,#}
{#        chartHeight = origChartHeight;#}
{##}
{#    $('<button>+</button>').insertBefore($('#container')).click(function () {#}
{##}
{##}
{#        chartHeight *= 1.2;#}
{#        $('#container').highcharts().setSize(origChartWidth,chartHeight);#}
{#    });#}
{#    $('<button>-</button>').insertBefore($('#container')).click(function () {#}
{#        chartHeight *= 0.8;#}
{#        $('#container').highcharts().setSize(origChartWidth, chartHeight);#}
{#    });#}
{#    $('<button>1:1</button>').insertBefore($('#container')).click(function () {#}
{#        $('#container').highcharts().setSize(origChartWidth, origChartHeight);#}
{##}
{#    });#}
{##}
{#        }#}



$(function(){

    $("#refresh").click(function(){
        var start_book_id = $("#start_book_id").val();
        var end_book_id = $("#end_book_id").val();
        crawl_view(start_book_id, end_book_id)
    });

    $("#submit").click(function (){
        var start_book_id = $("#start_book_id").val();
        var end_book_id = $("#end_book_id").val();
        $.ajax({
                    url:"{% url 'crawl' %}",
                    data:{start_book_id:start_book_id, end_book_id:end_book_id},
                    type:'POST',
                    dataType:'json',
                    async:true,
                    success:function(data){
                        var data = eval(data);
                        if(data[0]){

                            alert(data[1]);
{#                            crawl_view(start_book_id, end_book_id)#}
                        }
                        else{
                            alert(data[1])
                        }


                    }
        })
    });

            // create some buttons to test the resize logic




})
    </script>
</head>
<body>
<input type="text" id="clock" size="35" />
    <div class="container">
	    <div class="row">
		    <div class="span12" id="parent">

                <button id="refresh" class="autocompare">Set new data</button>

                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label for="book_id" class="sr-only">从book_id</label>
                        <input type="text" class="form-control" id="start_book_id"
                               placeholder="请输入起始book_id">
                    </div>
                    <div class="form-group">
                        <label for="book_id" class="sr-only">到book_id</label>
                        <input type="text" class="form-control" id="end_book_id"
                               placeholder="请输入结束book_id">
                    </div>

                </form>
                <button id="submit" type="submit" class="btn btn-defalut">提交</button>
                <div id="container" style="height: 400px"></div>



		    </div>
	    </div>
    </div>

</body>
</html>
